<template>
<div id="app">
    <router-view v-if="isLogin"></router-view>
    <el-container v-if="!isLogin">
        <el-header class="header">
            <headerbar></headerbar>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <navmenu></navmenu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</div>
</template>

<script>
import HeaderBar from '@/components/Header'
import NavMenu from '@/components/NavMenu'

export default {
    data() {
        return {
            isLogin: true
        }
    },
    name: 'app',
    components: {
        'headerbar': HeaderBar,
        'navmenu': NavMenu
    },
    created() {
        if (this.$route.name == 'login' || this.$route.name == null) {
            this.isLogin = true;
            this.$router.push({
                path: '/login'
            })
        } else {
            this.isLogin = false;

        }
    },
    watch: {
        '$route'(to, from) {
            if (to.name == 'login' || to.name == null) {
                this.isLogin = true;
                this.$router.push({
                    path: '/login'
                })
            } else {
                this.isLogin = false;
            }
        }
    }
}
</script>

<style>
.header {
    line-height: 60px;
}
/* 这个样式全局改不太好，但是是权衡后的方式 */
.el-loading-spinner {
    top: 15em;
}
.tableBorder {
    background: #fff;
    border: 1px solid #dcdfe6;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
    padding: 12px;
    margin-top: 15px;
}

</style>
